<template>
  <div>
    <div class="breadcrumb-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>实名认证</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="authen container">
      <left-nav-bar :active="active"></left-nav-bar>
      <div class="right">
        <div class="line-ti">
          <div>实名认证</div>
        </div>
        <div v-if="is_real_name == 'yes' && !isEdit">
          <div class="real-box">
            <div class="name">
              <span>姓名：</span>
              {{form.name}}
            </div>
            <div class="idcard">
              <span>身份证号：</span>
              {{form.idcard}}
            </div>
            <div class="idcard">
              <span>手机号：</span>
              {{form.mobile}}
            </div>
          </div>
          <div class="cancel-box td-fcc">
              <el-button class="btn-r" @click="_cancelRealName">清空实名认证</el-button>
              <el-button class="btn-b" @click="isEdit = true">修改实名认证</el-button>
          </div>
        </div>
        <div class="form-box" v-if="is_real_name == 'no' || isEdit">
          <div class="title">请提交实名认证资料，认证后可购物和享受相关优惠政策！</div>
          <div class="form-input">
            <div class="list">
              <div class="tit">姓名：</div>
              <input type="text" v-model="form.name" placeholder="请输入真实姓名" />
            </div>
            <div class="list">
              <div class="tit">身份证号：</div>
              <input type="text" v-model="form.idcard" placeholder="请输入身份证号" />
            </div>
            <div class="list">
              <div class="tit">手机号：</div>
              <input type="text" v-model="form.mobile" placeholder="请输入手机号" />
            </div>
            <div class="list card-list" v-if="false">
              <div class="tit">上传证件照：</div>
              <div class="card-box">
                <div class="card-item">
                  <el-upload
                    class="el-upload-dragger"
                    :action="url"
                    :data="qiniuData"
                    :limit="1"
                    :before-upload="beforeAvatarUpload"
                    :on-success="handleAvatarSuccess_one"
                  >
                    <div class="card-img">
                      <img :src="form.idcard_one" v-if="form.idcard_one"/>
                      <img src="../../assets/images/card_f.png" v-else/>
                    </div>
                  </el-upload>
                </div>
                <div class="card-item">
                  <el-upload
                    class="el-upload-dragger"
                    :action="url"
                    :data="qiniuData"
                    :limit="1"
                    :before-upload="beforeAvatarUpload"
                    :on-success="handleAvatarSuccess_two"
                  >
                    <div class="card-img">
                      <img :src="form.idcard_two" v-if="form.idcard_two"/>
                      <img  src="../../assets/images/card_z.png" v-else/>
                    </div>
                  </el-upload>
                </div>
              </div>
            </div>
          </div>
          <div class="pwd-but">
            <el-button class="btn-r" @click="submit">保存修改</el-button>
            <el-button class="btn-b" @click="isEdit = false">取消修改</el-button>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 200px"></div>
  </div>
</template>

<script>
import { getRealName, checkRealName, cancelRealName } from "@api/user";
import { qiniuToken } from "@api/public";
import leftNavBar from "@components/leftNavBar";
export default {
  data() {
    return {
      active: 2,
      url: "http://upload-z2.qiniup.com",
      qiniuDomail: "",
      qiniuData: {},
      is_real_name: "",
      isEdit: false,
      form: {
        name: "",
        idcard: "",
        mobile: "",
        idcard_one: "",
        idcard_two: ""
      },
      fileType: ["image/png", "image/jpg", "image/jpeg", "image/gif"]
    };
  },
  components: {
    leftNavBar
  },
  mounted() {
    this.getQiniuToken();
    this.getRealNameInfo();
  },
  methods: {
    getRealNameInfo() {
      let that = this;
      getRealName().then(res => {
        this.isEdit = false
        this.is_real_name = res.data[0].is_real_name == 1 ? "yes" : "no";
        if (this.is_real_name == "yes") {
          this.form.name = res.data[0].id_name || "";
          this.form.idcard = res.data[0].idcard || "";
          this.form.mobile = res.data[0].mobile || "";
          this.form.idcard_one = res.data[0].idcard_one || "";
          this.form.idcard_two = res.data[0].idcard_two || "";
        } else {
          this.form.name = "";
          this.form.idcard = "";
          this.form.mobile = "";
          this.form.idcard_one = "";
          this.form.idcard_two = "";
        }
      });
    },
    submit() {
      if (!this.form.name) {
        this.$dialog.alert({mes: '请填写真实姓名'})
        return
      }
      let that = this;
      let params = this.form;
      checkRealName(params)
        .then(res => {
          this.$dialog.success(res.msg);
          this.getRealNameInfo();
        })
        .catch(err => {
          this.$dialog.alert({mes: err.msg})
        });
    },
    _cancelRealName() {
      cancelRealName()
        .then(res => {
          this.$dialog.success(res.msg);
          if (res.status == 200) {
            this.isEdit = false
            this.getRealNameInfo();
          }
        })
        .catch(err => {
          this.$dialog.alert({mes: err.msg})
        });
    },
    // upload img
    getQiniuToken() {
      qiniuToken()
        .then(res => {
          this.qiniuData.token = res.data.uptoken;
          this.qiniuDomail = res.data.pc_domain + "/";
        })
        .catch(err => {
          this.$dialog.error(err.msg || "获取七牛数据失败");
        });
    },
    handleAvatarSuccess_one(res, file, fileList) {
      if (res.key) {
        this.form.idcard_one = this.qiniuDomail + res.key;
      }
    },
    handleAvatarSuccess_two(res, file, fileList) {
      if (res.key) {
        this.form.idcard_two = this.qiniuDomail + res.key;
      }
    },
    beforeAvatarUpload(file) {
      let that = this;
      const isImage = this.fileType.indexOf(file.type) > -1;
      const isLt20M = file.size / 1024 / 1024 < 20;
      if (!isImage) {
        this.$dialog.error("请上传图片类型文件");
      }
      if (!isLt20M) {
        this.$dialog.error("请上传小于20M文件！");
      }
      return isImage && isLt20M;
    }
  }
};
</script>

<style scoped  rel="stylesheet/scss" lang="scss" scoped>
$color: #DA213D;

.authen {
  /*width: 70%;*/
  margin: 0 auto;
  display: flex;
  .right {
    width: 1000px;
    margin-left: 32px;
    .line-ti {
      width: 100%;
      border-bottom: 1px solid #dbdbdb;
      > div {
        color: #014a97;
        font-size: 18px;
        font-family: MicrosoftYaHei-Bold;
        border-bottom: 3px solid $color;
        width: 90px;
        line-height: 36px;
        font-weight: 600;
        text-align: center;
      }
    }
    .title {
      width: 100%;
      height: 41px;
      line-height: 41px;
      background-color: rgba(255, 246, 253, 1);
      color: #DA213D;
      font-size: 16px;
      padding-left: 47px;
      font-weight: 600;
      margin-top: 30px;
    }
    .form-input {
      .list {
        display: flex;
        // height: 40px;
        align-items: center;
        margin-bottom: 24px;
        .tit {
          color: #999999;
          font-size: 14px;
          width: 85px;
          text-align: right;
        }
        input {
          width: 353px;
          height: 40px;
          border-radius: 4px;
          background-color: rgba(255, 255, 255, 1);
          border: 1px solid rgba(217, 217, 217, 1);
          margin-left: 42px;
          padding-left: 15px;
          outline: none;
        }
        .card-box {
          margin-left: 42px;
          .card-item {
            margin-bottom: 30px;
            .card-img {
              width: 360px;
              height: 180px;
              position: relative;
              img {
                width: 100%;
                height: 100%;
                display: block;
                object-fit: contain;
              }
            }
          }
        }
      }
      .card-list {
        align-items: flex-start;
      }
      .list:nth-of-type(1) {
        margin-top: 48px;
      }
    }
    .pwd-but {
      margin: 20px 0 0 133px;
    }
  }
}
.real-box {
  font-size: 18px;
  color: #014a97;
  line-height: 2;
  margin: 100px auto;
  padding: 30px 30px;
  width: 360px;
  background: url(../../assets/seal/icon_shiming.png) no-repeat right 10px top
    10px;
  background-size: 80px;
  border: solid #eee 1px;
  border-radius: 2px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  span {
    display: inline-block;
    width: 80px;
    padding-right: 10px;
    text-align: right;
    color: #999;
    font-size: 15px;
  }
}
</style>
